<template>
	<view class="examineInfo">
		<!-- 审批人 -->
		<!-- 固定审批 -->
		<view class="list" v-if="record.examineType === 1">
			<view class="item" v-for="(v, k) in record.steps" :key="k">
				<view class="bd" @tap.stop="popOpen(v)">
					<u-image src="/static/img/examine_head.png" width="40px" height="40px" class="avatar"></u-image>
					<view class="detail">{{ v | detailName }}</view>
					<view class="status">
						<u-image width="20px" height="20px" :src="v.examineStatus | statusIcon" />
						<text class="name">{{ v.examineStatus | getStatusName }}</text>
					</view>
				</view>
				<u-icon v-if="record.steps.length - 1 != k" name="arrow-right" size="30px" color="#dfdfdf"></u-icon>
			</view>
		</view>
		<!-- 授权审批 -->
		<view class="list" v-if="record.examineType === 2">
			<view class="item" v-for="(v, k) in record.steps" :key="k">
				<view class="bd" @tap.stop="popOpen(v)">
					<u-image :src="v.examinUser.img" width="40px" height="40px" class="avatar"></u-image>
					<view class="status">
						<u-image width="20px" height="20px" :src="v.examineStatus | statusIcon" />
						<text class="name">{{ v.examineStatus | getStatusName }}</text>
					</view>
				</view>
				<u-icon v-if="record.steps.length - 1 != k" name="arrow-right" size="30px" color="#dfdfdf"></u-icon>
			</view>
		</view>

		<!-- 审批人详细 -->
		<u-popup mode="bottom" height="300px" :closeable="true" v-model="showPop" border-radius="10">
			<template v-if="curUser.length">
				<u-row class="pop-item" v-for="(v, k) in curUser" :key="k" align="top">
					<u-col span="1">
						<u-image width="20px" height="20px" :src="v.examineStatus | statusIcon" />
					</u-col>
					<u-col span="11">
						<view class="datetime">{{ v.examineTime }}</view>
						<view class="user">
							<text class="name">{{ v.realname }}</text>
							<text class="text">{{ v.examineStatus | getStatusName }}此申请</text>
						</view>
						<view v-if="v.files && v.files.length" class="links">
							<view class="item" v-for="(file, fileIndex) in v.files" :key="fileIndex">
								<u-link :href="v.filePath" :under-line="false">
									<u-icon name="attach"></u-icon>
									{{ file.name }}
								</u-link>
							</view>
						</view>
					</u-col>
				</u-row>
			</template>
			<u-empty v-else text="数据为空" mode="list"></u-empty>
		</u-popup>

		<!-- 审批日志 -->
		<u-row v-for="(v, k) in log" :key="k" align="top">
			<u-col span="1">
				<u-image width="20px" height="20px" :src="v.examineStatus | statusIcon" />
			</u-col>
			<u-col span="11" class="has-line">
				<view class="title">{{ v.orderId | stepName }} {{ v.examineTime }}</view>
				<view class="user">
					<text class="name">{{ v.realname }}</text>
					<text class="text">{{ v.examineStatus | getStatusName }}了此申请</text>
				</view>
				<view v-if="v.remarks" class="cf-flow-item-content">
					{{ v.remarks }}
					<view class="cf-flow-item-content-arrow" />
				</view>
				<view v-if="v.files && v.files.length" class="links">
					<view class="item" v-for="(file, fileIndex) in v.files" :key="fileIndex">
						<u-link :href="v.filePath" :under-line="false">
							<u-icon name="attach"></u-icon>
							{{ file.name }}
						</u-link>
					</view>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
import Nzhcn from 'nzh/cn';
export default {
	name: 'examineInfoShow',
	props: {
		recordId: {
			type: [String, Number],
			default: () => 0,
		},
		ownerUserId: {
			type: [String, Number],
			default: () => 0,
		},
	},
	filters: {
		statusIcon(status) {
			// 0失败，1通过，2撤回，3创建，4待审核
			// JAVA 0 未审核 1 审核通过 2 审核拒绝 3 审核中 4 已撤回 5 创建 6 待提交
			if (status == 2) {
				return require('@/static/img/check_fail.png');
			} else if (status == 1) {
				return require('@/static/img/check_suc.png');
			} else if (status == 4) {
				return require('@/static/img/check_revoke.png');
			} else if (status == 3) {
				return require('@/static/img/check_create.png');
			} else if (status == 0 || status == 6) {
				return require('@/static/img/check_wait.png');
			} else if (status == 5) {
				return require('@/static/img/check_create.png');
			}
			return '';
		},
		stepName(index) {
			return '第' + Nzhcn.encodeS(index) + '级';
		},
		// 获取状态名称
		getStatusName(status) {
			// 0拒绝，1通过，2撤回，3创建，4待审核
			let statusText = ['未审核 ', '通过', '拒绝', '审核中', '撤回', '创建', '待提交'];
			return status >= 0 ? statusText[status] : '';
		},
		detailName(data) {
			if (data.stepType == 2) {
				return data.userList.length + '人或签';
			} else if (data.stepType == 3) {
				return data.userList.length + '人会签';
			} else if (data.stepType == 1) {
				return '负责人主管';
			} else if (data.stepType == 4) {
				return '上一级审批人主管';
			} else if (data.stepType == 5) {
				return '创建人';
			} else if (data.stepType == 6) {
				return '部门负责人';
			}
		},
	},
	data() {
		return {
			log: [],
			record: {},
			// pop状态
			showPop: false,
			// pop里面的数据对象
			curUser: {},
		};
	},
	mounted() {
		this.getExaminLogList();
		this.getExaminRecordList();
	},
	methods: {
		// 获取 审批流程
		async getExaminLogList() {
			let data = {
				recordId: this.recordId,
			};
			let res = await this.$api.customer.common.examineLogList(data);
			if (res.code === 200) {
				this.log = res.data || [];
			}
		},
		// 获取 审批历史
		async getExaminRecordList() {
			let data = {
				recordId: this.recordId,
				ownerUserId: this.ownerUserId,
			};
			let res = await this.$api.customer.common.examineRecordList(data);
			if (res.code === 200) {
				this.record = res.data || {};
			}
		},
		// 打开弹窗
		popOpen(data) {
			this.curUser = data.userList || [];
			this.showPop = true;
		},
	},
};
</script>

<style lang="scss" scoped>
.examineInfo {
	padding: 10px;
}

.list {
	display: flex;
	overflow-y: auto;
	.item {
		display: flex;
		padding: 10px 5px;
		.bd {
			text-align: center;
			padding-right: 20px;

			.avatar {
				display: inline-block;
			}
			.detail {
				font-size: 12px;
				margin-top: 8px;
				color: #999;
			}
			.status {
				display: flex;
				align-items: center;
				margin-top: 10px;
			}
			.u-image {
				width: 20px;
				margin-right: 5px;
			}
		}
	}
}

.pop-item {
	padding: 15px;
	.datetime {
		color: #999;
	}
	.user {
		margin: 8px 0;
		.name {
			margin-right: 10px;
		}
	}
}

.has-line {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		left: -15px;
		top: 20px;
		bottom: 0;
		width: 1rpx;
		background: #ddd;
	}

	.title {
		color: #999;
	}
	.user {
		margin: 5px 0 0;
		.text {
			padding-left: 10px;
			color: #999;
		}
	}
	.cf-flow-item-content {
		display: inline-block;
		position: relative;
		min-width: 200px;
		margin-top: 15px;
		border-radius: 4px;
		background-color: #f7f8fa;
		color: #929293;
		padding: 8px;
		line-height: 18px;
		.cf-flow-item-content-arrow {
			width: 8px;
			height: 8px;
			background-color: #f7f8fa;
			transform: rotate(45deg);
			position: absolute;
			top: -4px;
			left: 25px;
		}
	}
	.links {
		margin-top: 10px;
		.item {
			margin: 5px 0;
		}
	}
}
</style>